<div ng-controller="StencilController" class="editorBg">
	<div class="full">
		<div class="row row-no-gutter">

			<!-- 左侧树菜单  -->

			<div id="paletteHelpWrapper" class="col-xs-3">
				<div class="stencils" id="paletteSection">
					<div ng-if="stencilItemGroups.length > 1">
				  <div ng-repeat="group in stencilItemGroups">
  
					  <ul ng-if="group.visible && group.items" class="stencil-group"  ng-class="{collapsed: !group.expanded, 'first': $first}">
						  <li ng-include="'editor-app/partials/stencil-item-template.html?version=4'"></li>
					  </ul>
  
					  <div ng-if="!group.items" ng-include="'editor-app/partials/root-stencil-item-template.html?version=4'"></div>
  
				  </div>
					</div>
					<div ng-if="stencilItemGroups.length == 1">
				<ul class="stencil-group">
					<li ng-repeat="item in stencilItemGroups[0].paletteItems" class="stencil-item"
						 id="{{item.id}}"
						 rundeckId="{{item['rundeckId']}}"
						 name={{item.name}}
						 title="{{item.description}}"
						 ng-model="draggedElement"
						 data-drag="true"
						 jqyoui-draggable="{onStart:'startDragCallback', onDrag:'dragCallback'}"
						 data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}">
		
						<img ng-src="editor-app/stencilsets/bpmn2.0/icons/{{item.icon}}" width="16px;" height="16px;"/>
						{{item.name}}
					</li>
				  </ul>
					 </div>
				</div>
			</div>

			<!-- 左侧树菜单结束  -->

			<div id="mainCanvas" ng-class="{'canvasSelectedNode' : showProto , 'canvasNoSelectedNode': !showProto}">
				<div class="subheader editor-toolbar" id="editor-header">
					<div class="btn-group">
						<div class="btn-toolbar pull-left" ng-controller="ToolbarController" ng-cloak>
							<button id="{{item.id}}"
									title="{{item.title | translate}}"
									ng-repeat="item in items"
									ng-switch on="item.type"
									class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
									ng-disabled="item.type == 'separator' || item.enabled == false"
									ng-click="toolbarButtonClicked($index)">
								<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip" title="{{item.title | translate}}"></i>
								<div ng-switch-when="separator" ng-class="item.cssClass"></div>
							</button>
							</div>
						</div>
						<!-- <div class="btn-group pull-right" ng-show="!secondaryItems.length">
							<div class="btn-toolbar pull-right" ng-controller="ToolbarController">
							<button class="btn btn-inverse tools-btn-close" title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type" ng-class="{'separator': item.type == 'separator'}"
								ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)" id="{{item.id}}">
								<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip" title="{{item.title | translate}}"></i>
							<span>关闭</span>
								<div ng-switch-when="separator" ng-class="item.cssClass"></div>
							</button>
							</div>
						</div> -->
				</div>
				<div id="canvasHelpWrapper" class="col-xs-9">
					<div class="canvas-wrapper" id="canvasSection"
							ng-model="droppedElement"
						ng-model="droppedElement"
						data-drop="true"
						data-jqyoui-options
						jqyoui-droppable="{onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
					<div class="canvas-message" id="model-modified-date"></div>
					<div class="Oryx_button"
						id="delete-button"
						title="{{'BUTTON.ACTION.DELETE.TOOLTIP' | translate}}"
						ng-click="deleteShape()"
						style="display:none">
						<img src="editor-app/images/delete.png"/>
					</div>
					<div class="Oryx_button"
						id="morph-button"
						title="{{'BUTTON.ACTION.MORPH.TOOLTIP' | translate}}"
						ng-click="morphShape()"
						style="display:none">
						<img src="editor-app/images/wrench.png"/>
					</div>
					<!-- <div class="Oryx_button"
						id="showProto-button"
						title="{{'BUTTON.ACTION.MORPH.EDITPROTO' | translate}}"
						ng-click="showProto = true"
						style="display:none">
						<img src="editor-app/images/editProto.png"/>
					</div> -->
					<div class="Oryx_button"
						ng-repeat="item in quickMenuItems"
						id="{{item.id}}"
						title="{{item.description}}"
						ng-click="quickAddItem(item.id)"
						ng-model="draggedElement"
						data-drag="true"
						jqyoui-draggable="{onStart:'startDragCallbackQuickMenu', onDrag:'dragCallbackQuickMenu'}"
						data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}"
						style="display:none">
						<img ng-src="editor-app/stencilsets/bpmn2.0/icons/{{item.icon}}"/>
					</div>
					</div>
				</div>
			</div>
			
			<div id="propertiesHelpWrapper" style="display:none" class="col-xs-9">
				<div class="propertySection" id="propertySection"
					ng-class="{collapsed: propertyWindowState.collapsed}">
					<div class="selected-item-section">
						<div class="clearfix">
							<div class="pull-right" ng-if="selectedItem.auditData.createDate">
								<strong>{{'ELEMENT.DATE_CREATED' | translate}}: </strong> {{selectedItem.auditData.createDate}}
							</div>
							<div class="pull-right" ng-if="selectedItem.auditData.author">
								<strong>{{'ELEMENT.AUTHOR' | translate}}: </strong> {{selectedItem.auditData.author}}
							</div>
							<div class="selected-item-title">
								<a>
									<i class="glyphicon" ng-class="{'glyphicon-chevron-right': showProto , 'glyphicon-chevron-left': !showProto}" id="protoColose" ng-click = "showProto = !showProto"></i>
									<!-- <i class="glyphicon glyphicon-chevron-left" id="protoColose" ng-click = "showProto = true"></i> -->
									<span ng-show="selectedItem.title != undefined && selectedItem.title != null && selectedItem.title.length > 0">{{selectedItem.title}}</span>
									<span ng-show="!selectedItem || selectedItem.title == undefined || selectedItem.title == null || selectedItem.title.length == 0">{{modelData.name}}</span>
								</a>
							</div>
						</div>
						<div class="selected-item-body">
						  <div ng-if = "!isTaskServer">
							   <div class="property-row" ng-repeat="property in selectedItem.properties"
									ng-click="propertyClicked($index)" ng-class="{'clear' : $index%2 == 0}">
									<span class="title" ng-if="!property.hidden && !property.isHidden">{{ property.title }}&nbsp;:</span>
									<span class="title-removed" ng-if="property.hidden && !property.isHidden"><i>{{ property.title }}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i></span>
									<span class="value" ng-if="!property.isHidden">
										<ng-include
											src="getPropertyTemplateUrl($index)" ng-if="!property.hasReadWriteMode"></ng-include>
										<ng-include src="getPropertyReadModeTemplateUrl($index)"
											ng-if="property.hasReadWriteMode && property.mode == 'read'"></ng-include>
										<ng-include src="getPropertyWriteModeTemplateUrl($index)"
											ng-if="property.hasReadWriteMode && property.mode == 'write'"></ng-include>
									</span>
							  	</div>
							</div>

							<div ng-if="isUserTask">
								<div class='form-group row'>
									<div class='col-xs-12 ft-w-b'>角色组:</div>
									<div class="col-xs-12">
										<!-- <select name = "role" class='form-control' ng-model="selectedRoleId"  ng-selected="setRole(this)" ng-options="o.id as o.name for o in userRoles"> -->
											<!-- <option ng-repeat="role in userRoles;" ng-selected = "selectedRoleId == role.id" value="{{role.id}}">{{role.name}}</option> -->
										</select>
										<!-- <input class='form-control' type='' name="{{proto['name']}}" ng-model = "selectedShape['properties'][proto['name']]" placeholder="{{proto['value']}}"> -->
									</div>
								</div>
							</div>

							<div ng-if = "isTaskServer">
								<!-- serviceTaskProtos -->
								<div class='form-group row' ng-repeat = 'proto in serviceTaskProtos;'>
									<div class='col-xs-12 ft-w-b'>{{proto['title']}}</div>
									<div class="col-xs-12">
										<input class='form-control' type='' name="{{proto['name']}}" ng-model = "selectedShape['properties'][proto['name']]" placeholder="{{proto['value']}}">
									</div>
								</div>
								<div class='form-group row'>
									<div class='col-xs-12 ft-w-b'>超时时间</div>
									<div class='col-xs-10'>
										<input class='form-control' type='number' name="timeout" ng-model = "rundeckTimeout" placeholder="{{rundeckTimeout}}" ng-change="settimeouts(this)">
									</div>
									<div class='col-xs-2 pad-lr-0 text-center'>秒</div>
								</div>
								<div class='form-group row' ng-repeat = 'item in taskOptions;'>
									<div class='col-xs-12 ft-w-b'>
										<span class='spanColorRed' ng-if="item['required']">*</span> {{item['name']}}
									</div>
									<div class="col-xs-12" ng-if = "!item['values'] && !item['valuesUrl']">
										<input class='form-control' type='' name="{{item['name']}}" required="item['required']" ng-model = "item['value']" placeholder="{{item['value']}}" ng-change="setSelectShapFieldsValue(item)">
										<p class='mar-t-10'>{{item['description']}}</p>
									</div>
									<div class='col-xs-12' ng-if = "item['values'] && !item['valuesUrl']">
										<select class='form-control' name = "{{item['name']}}" ng-model = "item['value']" ng-change="setSelectShapFieldsValue(item)" ng-options="value for value in item['values']">
											<!-- <option ng-repeat = "value in item['values']" value = '{{value}}'>{{value}}</option> -->
										</select>
										<p class='mar-t-10'>{{item['description']}}</p>
									</div>
									<div class='col-xs-12' ng-if = "item['values'] && item['valuesUrl']">
										<select class='form-control' name = "{{item['name']}}" ng-model = "item['value']" ng-change="setSelectShapFieldsValue(item)" ng-options="o.value as o.name for o in item['values']">
											<!-- <option ng-repeat = "value in item['values']" value = '{{value.value}}'>{{value.name}}</option> -->
										</select>
										<p class='mar-t-10'>{{item['description']}}</p>
									</div>
								</div>
								<div class='form-group row'>
									<div class='col-xs-12 ft-w-b'>节点过滤</div>
									<div class="col-xs-10">
										<input class='form-control' type='text' name="nodefilter" ng-model = "nodeFilter" placeholder="请输入节点过滤表达式" ng-blur="nodeFilterInputChange(this)">
									</div>
									<div class="col-xs-2 pad-lr-0 text-center">
										<button class="btn btn-default btn-sm" ng-click="clearNodeFilter()">清除</button>
										<!-- <button class="btn btn-default">Button</button> -->
									</div>
								</div>
								<div class="row">
								<!-- <div class="col-xs-1" style="height:1px;"></div> -->
								<div class="col-xs-12 list-box" ng-if="showNodes.length > 0">
									<div class="col-xs-12">
										<ul class='list-group-a' style="border:none;">
											<li class="list-group-item-a" ng-repeat="node in showNodes" ng-click="setSelectNode(node)"><span>{{node.nodename}}</span></li>										
										</ul>
									</div>

									<div class='col-xs-12'>

											<ul class='list-group-a'>
												<li class="list-group-item-a" ng-repeat="(key , value) in seleceNode">
												<span ng-click="setNodeConfig(key , '.*')">{{key}}:</span>	
												<span ng-click="setNodeConfig(key , value)">{{value}}</span>	
												</li>										
											</ul>

									</div>
								</div>
								</div>
							</div>  
					  	</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  